<template>
<div id="app">
<div class="container">
  <header>
    <h1><i class="fas fa-robot"></i> 哈基机 <i class="fas fa-robot"></i></h1>
    <div class="subtitle">"你好，我是哈基机，快来和我互动吧！"</div>
  </header>

  <div class="robot-container">
    <div class="speech-bubble">
      {{ currentMessage }}
    </div>

    <div class="nb-robot" :class="robotAnimation">
      <!-- 机器人天线 -->
      <div class="antenna"></div>

      <!-- 机器人头部 -->
      <div class="robot-head">
        <div class="eyes">
          <div class="eye" :style="eyeStyle"></div>
          <div class="eye" :style="eyeStyle"></div>
        </div>
        <div class="mouth" :style="mouthStyle"></div>
      </div>

      <!-- 机器人身体 -->
      <div class="robot-body">
        <div class="nb-text">NB</div>
      </div>

      <!-- 机器人手臂 -->
      <div class="arm arm-left" :style="leftArmStyle"></div>
      <div class="arm arm-right" :style="rightArmStyle"></div>

      <!-- 机器人腿 -->
      <div class="leg leg-left" :style="leftLegStyle"></div>
      <div class="leg leg-right" :style="rightLegStyle"></div>
    </div>
  </div>

  <div class="robot-status">
    <div class="status-item">
      <div class="status-label">心情指数</div>
      <div class="status-value">{{ moodLevel }}</div>
    </div>
    <div class="status-item">
      <div class="status-label">能量值</div>
      <div class="status-value">{{ energyLevel }}</div>
    </div>
    <div class="status-item">
      <div class="status-label">搞笑程度</div>
      <div class="status-value">{{ funLevel }}</div>
    </div>
  </div>

  <div class="controls">
    <button class="action-btn" @click="sayHello">
      <i class="fas fa-hand-wave"></i> 打招呼
    </button>
    <button class="action-btn" @click="tellJoke">
      <i class="fas fa-laugh-squint"></i> 讲笑话
    </button>
    <button class="action-btn" @click="dance">
      <i class="fas fa-music"></i> 跳舞
    </button>
    <button class="action-btn" @click="surprise">
      <i class="fas fa-surprise"></i> 惊喜
    </button>
    <button class="action-btn" @click="reset">
      <i class="fas fa-redo"></i> 重置
    </button>
  </div>

  <div class="history">
    <h2><i class="fas fa-history"></i> 对话历史</h2>
    <div v-for="(msg, index) in messageHistory" :key="index" class="history-item">
      <i class="fas fa-robot"></i> {{ msg }}
    </div>
  </div>
</div>

<div class="special-effects">
  <div v-for="(effect, index) in effects" :key="index" class="effect" :style="effect.style">
    {{ effect.text }}
  </div>
</div>
</div>


</template>



<script setup>
import {ref, onMounted,  computed} from 'vue';

// 响应式数据
const currentMessage = ref('你好，我是哈基机！');
const messageHistory = ref(['哈基机: 你好，我是哈基机！']);
const mood = ref(80);
const energy = ref(100);
const fun = ref(50);
const robotAnimation = ref('');
const effects = ref([]);

// 机器人表情状态
const eyeStyle = ref({ transform: 'translate(-50%, -50%)' });
const mouthStyle = ref({ height: '20px', borderRadius: '0 0 30px 30px' });

// 机器人肢体状态
const leftArmStyle = ref({ transform: 'rotate(0deg)' });
const rightArmStyle = ref({ transform: 'rotate(0deg)' });
const leftLegStyle = ref({ transform: 'rotate(0deg)' });
const rightLegStyle = ref({ transform: 'rotate(0deg)' });

// 计算属性
const moodLevel = computed(() => {
  if (mood.value > 80) return '超开心';
  if (mood.value > 60) return '开心';
  if (mood.value > 40) return '一般';
  if (mood.value > 20) return '不高兴';
  return '生气';
});

const energyLevel = computed(() => {
  if (energy.value > 80) return '充沛';
  if (energy.value > 60) return '充足';
  if (energy.value > 40) return '中等';
  if (energy.value > 20) return '较低';
  return '耗尽';
});

const funLevel = computed(() => {
  if (fun.value > 80) return '爆笑';
  if (fun.value > 60) return '搞笑';
  if (fun.value > 40) return '有趣';
  if (fun.value > 20) return '平淡';
  return '无聊';
});

// 机器人说话方法
const speak = (message) => {
  currentMessage.value = message;
  messageHistory.value.push(`哈基机: ${message}`);

  // 限制历史记录长度
  if (messageHistory.value.length > 8) {
    messageHistory.value.shift();
  }
};

// 添加特效
const addEffect = (text) => {
  const x = Math.random() * 100;
  const style = {
    left: `${x}%`,
    color: getRandomColor(),
    fontSize: `${Math.random() * 2 + 2}rem`,
    animationDuration: `${Math.random() * 3 + 3}s`
  };

  effects.value.push({ text, style });

  // 移除旧的特效
  setTimeout(() => {
    effects.value.shift();
  }, 5000);
};

// 获取随机颜色
const getRandomColor = () => {
  const colors = ['#FF4081', '#3F51B5', '#4CAF50', '#FFC107', '#9C27B0', '#00BCD4', '#FF5722', '#8BC34A'];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 动作方法
const sayHello = () => {
  const greetings = [
    '你好，人类朋友！',
    '很高兴见到你！',
    '今天天气真不错！',
    '我是最哈基的机器人！',
    '一起来搞怪吧！',
    '你看起来很棒！'
  ];
  const greeting = greetings[Math.floor(Math.random() * greetings.length)];
  speak(greeting);

  // 更新状态
  mood.value = Math.min(100, mood.value + 5);
  energy.value = Math.max(0, energy.value - 2);

  // 动画效果
  robotAnimation.value = 'dance';
  setTimeout(() => robotAnimation.value = '', 2000);

  // 眼睛动画
  eyeStyle.value = { transform: 'translate(-40%, -50%)' };
  setTimeout(() => eyeStyle.value = { transform: 'translate(-50%, -50%)' }, 500);

  // 添加特效
  addEffect('👋');
};

const tellJoke = () => {
  const jokes = [
    '为什么程序员分不清万圣节和圣诞节？因为 Oct 31 == Dec 25！',
    '我告诉电脑我需要休息，它问我是不是要进入睡眠模式！',
    '为什么机器人从不生病？因为它们有防病毒软件！',
    '我的电池快没电了，你能给我充点冷笑话吗？',
    '我尝试讲个二进制笑话，但只有10%的人笑了！',
    '为什么机器人不喜欢太阳？因为它们害怕被晒黑（晒黑=晒成黑屏）！'
  ];
  const joke = jokes[Math.floor(Math.random() * jokes.length)];
  speak(joke);

  // 更新状态
  fun.value = Math.min(100, fun.value + 15);
  energy.value = Math.max(0, energy.value - 5);

  // 动画效果
  robotAnimation.value = 'shake';
  setTimeout(() => robotAnimation.value = '', 2000);

  // 嘴巴动画
  mouthStyle.value = { height: '30px', borderRadius: '30px' };
  setTimeout(() => mouthStyle.value = { height: '20px', borderRadius: '0 0 30px 30px' }, 1000);

  // 添加特效
  addEffect('😂');
  addEffect('🤣');
};

const dance = () => {
  speak('看我跳最炫的机器人舞！');

  // 更新状态
  mood.value = Math.min(100, mood.value + 10);
  energy.value = Math.max(0, energy.value - 15);
  fun.value = Math.min(100, fun.value + 20);

  // 动画效果
  robotAnimation.value = 'dance';
  setTimeout(() => robotAnimation.value = '', 5000);

  // 手臂动画
  leftArmStyle.value = { transform: 'rotate(-45deg)' };
  rightArmStyle.value = { transform: 'rotate(45deg)' };
  setTimeout(() => {
    leftArmStyle.value = { transform: 'rotate(45deg)' };
    rightArmStyle.value = { transform: 'rotate(-45deg)' };
  }, 500);
  setTimeout(() => {
    leftArmStyle.value = { transform: 'rotate(0deg)' };
    rightArmStyle.value = { transform: 'rotate(0deg)' };
  }, 1000);

  // 添加特效
  addEffect('💃');
  addEffect('🕺');
  addEffect('🎵');
};

const surprise = () => {
  const surprises = [
    '哇！看我变魔术！',
      '你知道一个叫哈基禹的家伙吗',
    '惊喜！我是最搞怪的机器人！',
    'NB！NB！NB！重要的事情说三遍！',
    '你绝对猜不到接下来会发生什么！',
    '3...2...1...惊喜来啦！'
  ];
  const surprise = surprises[Math.floor(Math.random() * surprises.length)];
  speak(surprise);

  // 更新状态
  mood.value = Math.min(100, mood.value + 20);
  energy.value = Math.max(0, energy.value - 20);
  fun.value = Math.min(100, fun.value + 30);

  // 动画效果
  robotAnimation.value = 'spin';
  setTimeout(() => robotAnimation.value = '', 2000);

  // 眼睛动画
  eyeStyle.value = { transform: 'translate(-60%, -50%)' };
  setTimeout(() => eyeStyle.value = { transform: 'translate(-50%, -50%)' }, 1000);

  // 嘴巴动画
  mouthStyle.value = { height: '40px', borderRadius: '50%' };
  setTimeout(() => mouthStyle.value = { height: '20px', borderRadius: '0 0 30px 30px' }, 1000);

  // 添加特效
  addEffect('✨');
  addEffect('🎉');
  addEffect('🌟');
  addEffect('🎊');
};

const reset = () => {
  speak('系统重启中...重新初始化完成！');
  mood.value = 80;
  energy.value = 100;
  fun.value = 50;
  robotAnimation.value = '';

  // 重置所有样式
  eyeStyle.value = { transform: 'translate(-50%, -50%)' };
  mouthStyle.value = { height: '20px', borderRadius: '0 0 30px 30px' };
  leftArmStyle.value = { transform: 'rotate(0deg)' };
  rightArmStyle.value = { transform: 'rotate(0deg)' };
  leftLegStyle.value = { transform: 'rotate(0deg)' };
  rightLegStyle.value = { transform: 'rotate(0deg)' };

  // 清空历史
  messageHistory.value = ['哈基机: 系统重启中...重新初始化完成！'];

  // 添加特效
  addEffect('🔄');
  addEffect('⚡');
};

// 初始问候
onMounted(() => {
  setTimeout(() => {
    speak('点击下面的按钮和我互动吧！');
  }, 2000);
});




</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Comic Sans MS', 'Marker Felt', cursive;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
  #app {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a1a1a;
  }
  
  .container {
    width: 100%;
    padding: 2rem;
    max-width: 1200px;
  }
  
  body {
    background: #121212 !important;
  }
  overflow: hidden;
  padding: 20px;
}

.container {
  max-width: 900px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}

header {
  margin-bottom: 20px;
}

h1 {
  font-size: 3.5rem;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
  0 0 20px rgba(255, 215, 0, 0.6),
  0 0 30px rgba(255, 215, 0, 0.4);
  margin-bottom: 10px;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 10px #fff, 0 0 20px #ffdd00, 0 0 30px #ffdd00; }
  to { text-shadow: 0 0 15px #fff, 0 0 25px #ffbb00, 0 0 35px #ffbb00; }
}

.subtitle {
  color: #ffeb3b;
  font-size: 1.5rem;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.robot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
  position: relative;
}

.speech-bubble {
  background: #fff;
  border-radius: 30px;
  padding: 20px;
  min-height: 100px;
  width: 300px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
  animation: bubblePop 0.5s;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  border: 15px solid transparent;
  border-top-color: #fff;
  transform: translateX(-50%);
}

@keyframes bubblePop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.nb-robot {
  position: relative;
  width: 200px;
  height: 300px;
  transform-origin: center bottom;
}

/* 机器人头部 */
.robot-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 120px;
  background: #4CAF50;
  border-radius: 50% 50% 40% 40%;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.1);
  z-index: 3;
}

/* 机器人天线 */
.antenna {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 8px;
  height: 25px;
  background: #FFC107;
  transform: translateX(-50%);
  border-radius: 5px 5px 0 0;
}

.antenna:before {
  content: '';
  position: absolute;
  top: -10px;
  left: -6px;
  width: 20px;
  height: 20px;
  background: #FF5722;
  border-radius: 50%;
  animation: antennaGlow 1.5s infinite alternate;
}

@keyframes antennaGlow {
  0% { box-shadow: 0 0 5px #ff5722; }
  100% { box-shadow: 0 0 20px #ff5722, 0 0 30px #ff9800; }
}

/* 机器人眼睛 */
.eyes {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
}

.eye {
  width: 30px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.eye:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  background: #2196F3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

/* 机器人嘴巴 */
.mouth {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  background: #FF5722;
  border-radius: 0 0 30px 30px;
  transition: all 0.3s ease;
}

/* 机器人身体 */
.robot-body {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 150px;
  background: #2196F3;
  border-radius: 20px;
  box-shadow: inset 0 -15px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nb-text {
  font-size: 3rem;
  font-weight: bold;
  color: #FFEB3B;
  text-shadow: 2px 2px 0 #000;
  animation: nbGlow 2s infinite alternate;
}

@keyframes nbGlow {
  from { text-shadow: 2px 2px 0 #000, 0 0 10px #ffeb3b; }
  to { text-shadow: 2px 2px 0 #000, 0 0 20px #ffeb3b, 0 0 30px #ff9800; }
}

/* 机器人手臂 */
.arm {
  position: absolute;
  top: 110px;
  width: 25px;
  height: 100px;
  background: #1976D2;
  border-radius: 10px;
  z-index: 1;
}

.arm-left {
  left: calc(50% - 110px);
  transform-origin: top center;
}

.arm-right {
  right: calc(50% - 110px);
  transform-origin: top center;
}

/* 机器人腿 */
.leg {
  position: absolute;
  bottom: 0;
  width: 25px;
  height: 80px;
  background: #0D47A1;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}

.leg-left {
  left: calc(50% - 40px);
  transform-origin: top center;
}

.leg-right {
  right: calc(50% - 40px);
  transform-origin: top center;
}

/* 动画类 */
.dance {
  animation: dance 1s ease infinite;
}

@keyframes dance {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.shake {
  animation: shake 0.5s ease infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

.action-btn {
  background: linear-gradient(to right, #FF512F, #F09819);
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.action-btn:active {
  transform: translateY(0);
}

.action-btn:nth-child(2) {
  background: linear-gradient(to right, #4776E6, #8E54E9);
}

.action-btn:nth-child(3) {
  background: linear-gradient(to right, #1D976C, #93F9B9);
}

.action-btn:nth-child(4) {
  background: linear-gradient(to right, #FF416C, #FF4B2B);
}

.action-btn:nth-child(5) {
  background: linear-gradient(to right, #614385, #516395);
}

.history {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 20px;
  margin: 30px auto;
  max-width: 600px;
  text-align: left;
  color: white;
  max-height: 200px;
  overflow-y: auto;
}

.history h2 {
  color: #ffeb3b;
  text-align: center;
  margin-bottom: 15px;
}

.history-item {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.robot-status {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.status-item {
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 15px;
  min-width: 150px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.status-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffeb3b;
  margin: 5px 0;
}

.status-label {
  color: white;
  font-size: 1rem;
}

.special-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.effect {
  position: absolute;
  font-size: 3rem;
  animation: floatUp 5s linear forwards;
  opacity: 0.7;
}

@keyframes floatUp {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.5rem; }
  .speech-bubble { width: 250px; font-size: 1.1rem; }
  .controls { gap: 10px; }
  .action-btn { padding: 12px 20px; font-size: 1rem; }
  .nb-robot { transform: scale(0.9); }
}
</style>